<template>
  <div>
    <el-container class="home-container">
      <el-header height="100px">
        <!-- 头部区域 -->
        <h1 class="text">English Test</h1>
      </el-header>
      <el-container>
        <!-- 侧边栏，是功能区域列表 -->
        <el-aside width="200px">
          <!-- 导航栏 --> 
          <div class="nav_box">
            <ul class="nav" @click="goTo(item,index)" v-for="(item,index) in dataPath" :key="index">
              <li><a href="javascript:void(0);" :class="{active:index===count?isActive:''}">{{item}}</a></li>
            </ul>
          </div>
        </el-aside>
        <el-main>
          <!-- 主体部分 -->
          <!-- 打开默认是背单词那一页 -->
          <!-- 路由占位符 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      dataPath:['单词背诵','词量测试','单词PK'],
      isActive:true,
      count:0
    }
  },
  methods:{
    // 跳转到测试页面
    goTo(item,index){
      // console.log(event.target.innerText);
      console.log(item);
      console.log(index);
      this.count = index;
      if(item === "词量测试"){
        this.$router.push('/test')
      }else if(item === '单词PK'){
        this.$router.push('/battle')
      }
    }
  }
};
</script>


<style scoped>
.home-container {
  /* 满屏的效果 */
  height: 100%;
}
/* 固定头部 */
.el-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  width: 80%;
  z-index: 1000;
  background-color: #fff;
  border-bottom: solid 1px #dedede;
}

.el-header .text {
  margin: 0;
  padding: 0;
  text-align: left;
  font-size: 2em;
  color: #dedede;
  line-height: 100px;
  /* text-shadow: 1px 2px 2px red, 0 0 1em blue, 0 0 0.2em blue; */
}
.text {
  animation: animate 2s linear infinite;
}

/* 定义动画 */
@keyframes animate {
  0% {
    text-shadow: 0px 1px 1px red, 0 0 0.1em blue, 0 0 0em blue;
    /* opacity: 0; */
    /* transform: scale(1); */
  }
  50%{
    text-shadow: 1px 2px 2px red, 0 0 1em blue, 0 0 0.2em blue;
    /* opacity: 1; */
    /* transform: scale(1.2); */
  }
  100% {
    text-shadow: 0px 1px 1px red, 0 0 0.1em blue, 0 0 0em blue;
    /* opacity: 0; */
    /* transform: scale(1); */

  }
}

.nav_box {
  margin-top: 160px;
  border-right: solid 1px #dedede;
}
.nav li {
  margin: 20px 0;
}
.el-main {
  margin-top: 150px;
}
.nav li a:hover{
  color: #6051f0;
  font-weight: bold;
}
.active{
  color: #6051f0;
  font-weight: bold;
}
</style>